<template>
	<view>
		<!-- 标题栏 -->
		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000" backState="1000">
			<view class="title-box"><text>车辆排班</text></view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop" zIndex="10070">
			<view>
				<!-- 筛选 -->
				<view class="searchBox">
					<!-- 门店筛选 -->
					<view class="flex-row-center" @click="showStore = !showStore">
						<text class="filterName">{{ currentStore.name }}</text>
						<u-icon :name="showStore ? 'arrow-up' : 'arrow-down'" color="#fff" size="14"></u-icon>
					</view>
					<!-- 关键字搜索 -->
					<view class="search">
						<u--input
							v-model="keyword"
							clearable
							border="none"
							fontSize="12"
							placeholder="请输入车型/车牌搜索"
							@change="searchChange"
							prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399"
						/>
					</view>
					<!-- 订单来源筛选 -->
					<view class="flex-row-center" @click="showOrderSource = !showOrderSource">
						<text class="filterName">{{ currentOrderSource.name }}</text>
						<u-icon :name="showOrderSource ? 'arrow-up' : 'arrow-down'" color="#fff" size="14"></u-icon>
					</view>
				</view>
				<!-- 其他筛选项 -->
				<view class="otherFilter">
					<!-- 订单状态筛选 -->
					<view class="flex-row-center-sb">
						<view
							class="statusItem"
							:class="{ active: orderStatus.code === item.code }"
							v-for="(item, index) in orderStatusList"
							:key="index"
							@click.stop="chooseOrderStatus(item)"
						>
							<text
								class="status"
								:class="[{ status1: item.code === 1 }, { status2: item.code === 2 }, { status5: item.code === 5 }]"
							>
								{{ item.name }}
							</text>
						</view>
					</view>

					<!-- 时间筛选 -->
					<view class="flex-row-center-sb" style="margin-top: 24rpx;">
						<view class="flex-row-center-sb">
							<view class="changeTime flex-row-center" @click.stop="changeWeek(1)">
								<text class="week" style="margin-right: 5rpx;">上一周</text>
								<image class="markIcon" src="/static/other/arrow_step1.png" mode="aspectFill"></image>
							</view>
							<view class="weekTime">{{ startTime }}~{{ endTime }}</view>
							<view class="changeTime flex-row-center" @click.stop="changeWeek(2)">
								<image class="markIcon" src="/static/other/arrow_step2.png" mode="aspectFill"></image>
								<text class="week" style="margin-left: 5rpx;">下一周</text>
							</view>
						</view>
						<view style="font-size: 28rpx;color: #FF8F00;" @click.stop="changeWeek(0)">今天</view>
					</view>
				</view>
				<table-head :tableColumns="table_thList"></table-head>
			</view>
		</u-sticky>

		<!-- 排班表 -->
		<view class="mainBox">
			<pb-table
				:tableHeadList="table_thList"
				:tableBodyList="table_bodyList"
				@goCarstorage="goCarstorage"
				@goDetail="goDetail"
			></pb-table>
		</view>

		<!-- 门店弹框 -->
		<u-picker
			:show="showStore"
			:columns="storeList"
			keyName="name"
			closeOnClickOverlay
			@close="showStore = false"
			@cancel="showStore = false"
			title="选择门店"
			confirmColor="#1573FF"
			@confirm="confimStore"
		></u-picker>

		<!-- 订单来源弹框 -->
		<u-picker
			:show="showOrderSource"
			:columns="orderSourceList"
			keyName="name"
			closeOnClickOverlay
			@close="showOrderSource = false"
			@cancel="showOrderSource = false"
			title="选择订单来源"
			confirmColor="#1573FF"
			@confirm="confimOrderSource"
		></u-picker>

		<!-- 订单弹框 -->
		<u-popup :show="showDetail" @close="close" mode="center" closeable zIndex="1000078" round="8">
			<view class="popBox">
				<view class="popTitleBox flex-colum-center">排班信息</view>
				<scroll-view scroll-y="true" style="max-height: 740rpx;width: 640rpx;">
					<view class="popContentBox">
						<block v-for="(item, index) in orders" :key="index">
							<!-- 订单 -->
							<template v-if="item.type == 1 || item.type == 2 || item.type == 5">
								<view class="commonStyle order">
									<view class="textInfo">
										<text class="text-name">订单来源:</text>
										<text class="text-value">{{ item.orderSourceName | filterNull }}</text>
									</view>
									<view class="textInfo">
										<text class="text-name">客户信息:</text>
										<text class="text-value">{{ item.memberName | filterNull }}</text>
									</view>
									<view class="textInfo">
										<text class="text-name">联系方式:</text>
										<text class="text-value">{{ item.memberPhone | filterNull }}</text>
									</view>
									<view class="textInfo">
										<text class="text-name">取还时间:</text>
										<text class="text-value">
											{{ item.actualStartTime ? item.actualStartTime : item.rentalStartTime | filterNull }}~{{
												item.actualEndTime ? item.actualEndTime : item.rentalEndTime | filterNull
											}}
										</text>
									</view>
									<view class="textInfo">
										<text class="text-name">取还门店:</text>
										<text class="text-value">
											{{ item.takeStoreName | filterNull }}~{{ item.alsoStoreName | filterNull }}
										</text>
									</view>
									<view class="textInfo">
										<text class="text-name">车型:</text>
										<text class="text-value">{{ item.modelInfo | filterNull }}</text>
									</view>
									<view class="textInfo" v-if="item.carNo">
										<text class="text-name">车牌号:</text>
										<text class="text-value">{{ item.carNo | filterNull }}</text>
									</view>
									<!-- 预约订单 -->
									<template v-if="item.type == 1">
										<!-- 已排车(重新排车) -->
										<template v-if="item.isPlatoon == 1">
											<view class="flex-xy-center" style="margin-top: 30rpx;">
												<text class="btn" @click.stop="goAllocation(item)">重新排车</text>
											</view>
										</template>
										<!-- 未排车 -->
										<template v-else-if="item.isPlatoon == 2">
											<!-- 存在预排车辆 -->
											<template v-if="item.carNo">
												<view class="flex-row-center-sb" style="margin-top: 30rpx;">
													<text class="btn btn1" @click.stop="goAllocation(item)">订单排车</text>
													<text v-if="item.carNo" class="btn" @click.stop="allocationCar(item)">
														分配当前车辆
													</text>
												</view>
											</template>
											<template v-else>
												<view class="flex-xy-center" style="margin-top: 30rpx;">
													<text class="btn btn1" @click.stop="goAllocation(item)">订单排车</text>
												</view>
											</template>
										</template>
									</template>
								</view>
							</template>
							<!-- 借出 -->
							<template v-else-if="item.type == 3">
								<view class="commonStyle seconded">
									<view class="textInfo">
										<text class="text-name">车牌号:</text>
										<text class="text-value">{{ item.carNo | filterNull }}</text>
									</view>
									<view class="textInfo">
										<text class="text-name">同行名称:</text>
										<text class="text-value">{{ item.secondmentStore | filterNull }}</text>
									</view>
									<view class="textInfo">
										<text class="text-name">借出时间:</text>
										<text class="text-value">
											{{ item.secondmentStartTime | filterNull }}~{{ item.secondmentEndTime | filterNull }}
										</text>
									</view>
								</view>
							</template>
							<!-- 调出 -->
							<template v-else-if="item.type == 4">
								<view class="commonStyle secondment">
									<view class="textInfo">
										<text class="text-name">车牌号:</text>
										<text class="text-value">{{ item.carNo | filterNull }}</text>
									</view>
									<view class="textInfo">
										<text class="text-name">调拨门店:</text>
										<text class="text-value">
											{{ item.bringStoreName | filterNull }}~{{ item.secondmentStore | filterNull }}
										</text>
									</view>
									<view class="textInfo">
										<text class="text-name">调拨时间:</text>
										<text class="text-value">
											{{ item.secondmentStartTime | filterNull }}~{{ item.secondmentEndTime | filterNull }}
										</text>
									</view>
								</view>
							</template>

							<!-- 下线 -->
							<template v-else-if="item.type == 6">
								<view class="commonStyle carOff">
									<view class="textInfo">
										<text class="text-name">车牌号:</text>
										<text class="text-value">{{ item.carNo | filterNull }}</text>
									</view>
									<view class="textInfo">
										<text class="text-name">下线时间:</text>
										<text class="text-value">
											{{ item.offLineTime | filterNull }}~{{ item.onLineTime | filterNull }}
										</text>
									</view>
									<view class="textInfo">
										<text class="text-name">下线原因:</text>
										<text class="text-value">{{ item.reason | filterNull }}</text>
									</view>
								</view>
							</template>
						</block>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { rosteringVoApi } from '@/api/home-api.js';
import dateTimeUtils from '@/utils/dateTimeUtils.js';
import pbTable from '@/components/pb-table/pb-table.vue';
import tableHead from '@/components/pb-table/table-head.vue';
import * as api from '@/api/order-api.js';
export default {
	components: {
		pbTable,
		tableHead
	},
	data() {
		return {
			offsetTop: 0,
			// 门店筛选
			showStore: false,
			currentStore: {},
			// 订单来源筛选
			showOrderSource: false,
			orderSourceList: [
				[
					{
						name: '全部订单',
						orderSource: ''
					},
					{
						name: '系统订单',
						orderSource: '1'
					},
					{
						name: '携程',
						orderSource: 'xc'
					},
					{
						name: '哈啰',
						orderSource: 'hl'
					},
					{
						name: '悟空',
						orderSource: 'wk'
					},
					{
						name: '租租车',
						orderSource: 'zzc'
					},
					{
						name: '凹凸',
						orderSource: 'at'
					},
					{
						name: '飞猪',
						orderSource: 'fz'
					}
				]
			],
			currentOrderSource: {
				name: '全部订单',
				orderSource: ''
			},
			// 订单状态筛选
			orderStatusList: [
				{
					name: '全部',
					code: 0
				},
				{
					name: '待取车',
					code: 1
				},
				{
					name: '用车中',
					code: 2
				},
				{
					name: '已还车',
					code: 5
				}
			],
			orderStatus: {
				name: '全部',
				code: 0
			},
			// 搜索关键字
			keyword: '',
			dataList: [],
			//当前年月
			headLeftTopDate: dateTimeUtils.getCurrentMonth(),
			//周数
			weekCount: 0,
			//开始时间
			startTime: dateTimeUtils.getCurrentWeek()[0],
			// 结束时间
			endTime: dateTimeUtils.getCurrentWeek()[1],
			// 表头
			table_thList: [],
			// 表内容
			table_bodyList: [],
			// 排班订单信息
			showDetail: false,
			orders: []
		};
	},
	computed: {
		storeList() {
			let result = [this.$store.state.initData.initData.storeList];
			this.currentStore = result[0][0];
			return result;
		}
	},
	onLoad: function(option) {
		//获取手机状态栏高度
		this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750) * uni.getSystemInfoSync().windowWidth - 0.5;
		this.table_thList = dateTimeUtils.enumerateDaysBetweenDates(this.startTime, this.endTime);
		this.$nextTick(()=>{
			this.getDataList();
		})
		
	},
	methods: {
		// 获取排班表数据
		getDataList() {
			this.table_bodyList = [];
			let params = {
				type: this.orderStatus.code,
				currUserStore: this.currentStore.id,
				startTime: this.startTime,
				endTime: this.endTime,
				orderSource: this.currentOrderSource.orderSource,
				keywords: this.keyword
			};
			uni.showLoading({
				title: '加载中,请耐心等待...'
			});
			rosteringVoApi(this.toParams(params)).then(res => {
				let data = res.data;
				// this.table_bodyList = res.data;
				this.table_bodyList = data.map(item => {
					this.$set(item, 'isOpen', true);
					return item;
				});
				uni.hideLoading();
			});
		},

		// 切换周
		changeWeek(type) {
			//获取当前是第几周
			switch (type) {
				case 0: //本周
					this.weekCount = 0;
					break;
				case 1: //上周
					this.weekCount--;
					break;
				case 2: //下周
					this.weekCount++;
					break;
				default:
					break;
			}

			//获取时间
			let weekTimes = [];
			if (this.weekCount == 0) {
				//本周
				weekTimes = dateTimeUtils.getCurrentWeek();
			} else if (this.weekCount < 0) {
				//本周之前
				//weekCount为负值时需要取绝对值
				let absCount = Math.abs(this.weekCount);
				weekTimes = dateTimeUtils.getLastWeek(absCount);
			} else {
				//本周之后
				weekTimes = dateTimeUtils.getNextWeek(this.weekCount);
			}
			this.startTime = weekTimes[0];
			this.endTime = weekTimes[1];
			this.table_thList = dateTimeUtils.enumerateDaysBetweenDates(this.startTime, this.endTime);
			console.log('日历', this.table_thList);
			this.getDataList();
		},

		// 排班信息弹框
		goDetail(orders) {
			console.log('我是点击的订单信息', orders);
			if (orders.length > 0) {
				this.showDetail = true;
				this.orders = orders;
			}
		},
		// 关闭弹框信息
		close() {
			this.showDetail = false;
			this.orders = [];
		},

		//选择门店
		confimStore(e) {
			this.currentStore = e.value[0];
			this.showStore = false;
			this.getDataList();
		},
		//选择订单来源
		confimOrderSource(e) {
			this.currentOrderSource = e.value[0];
			this.showOrderSource = false;
			this.getDataList();
		},
		// 筛选订单状态
		chooseOrderStatus(item) {
			this.orderStatus = item;
			this.getDataList();
		},
		//搜索
		searchChange(value) {
			this.keyword = value;
			this.getDataList();
		},
		// 查看库存
		goCarstorage(carModel) {
			let params = {
				modelId: carModel.modelId,
				storeId: this.currentStore.id,
				startTime: this.startTime,
				endTime: this.endTime
			};
			uni.navigateTo({
				url: './carstorage?' + `params=${encodeURIComponent(JSON.stringify(params))}`
			});
		},
		// 重新排车|订单排车
		goAllocation(item) {
			// ota订单
			let isOta = false;
			if (item.orderSource === '1' || item.orderSource === '2' || item.orderSource === '3') {
				isOta = false;
			} else {
				isOta = true;
			}
			let params = {
				orderNo: item.orderNo,
				isOta: isOta
			};
			console.log('params', params);
			uni.navigateTo({
				url: '/order/shortOrder/carAllocation?item=' + encodeURIComponent(JSON.stringify(params))
			});
			this.showDetail = false;
			uni.$once('refreshOrder', () => {
				this.getDataList();
			});
		},
		// 分配当前车辆
		allocationCar(item) {
			uni.showLoading({
				title: '分配中...',
				mask: true
			});
			api.supplyCar({
				orderNo: item.orderNo,
				carId: item.carId
			}).then(res => {
				uni.hideLoading();
				this.$u.toast('分配成功');
				this.showDetail = false;
				this.getDataList();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.searchBox {
	padding: 20upx;
	display: flex;
	align-items: center;
	background: linear-gradient(90deg, #3599ff 0%, #0275ed 100%);
	.filterName {
		font-size: 30upx;
		font-weight: bold;
		color: #fff;
	}
	.search {
		flex: 1;
		padding: 0 20upx;
		margin: 0 20upx;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24upx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}
}
.otherFilter {
	background-color: #f5f5f5;
	padding: 20rpx;
	.statusItem {
		width: 160rpx;
		height: 60rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #fff;
		border-radius: 8rpx;
		line-height: 60rpx;
		text-align: center;
		&.active {
			color: #fff;
			background-color: #1673ff;
		}
		.status {
			&.status1::before {
				display: inline-block;
				content: '';
				width: 12rpx;
				height: 12rpx;
				line-height: 12rpx;
				margin-right: 8rpx;
				border-radius: 6rpx;
				background-color: #ff8f00;
				position: relative;
				top: -4rpx;
			}
			&.status2::before {
				display: inline-block;
				content: '';
				width: 12rpx;
				height: 12rpx;
				margin-right: 8rpx;
				border-radius: 6rpx;
				background-color: #23bcca;
				position: relative;
				top: -4rpx;
			}
			&.status5::before {
				display: inline-block;
				content: '';
				width: 12rpx;
				height: 12rpx;
				margin-right: 8rpx;
				border-radius: 6rpx;
				position: relative;
				background-color: #369afe;
				top: -4rpx;
			}
		}
	}
	.changeTime {
		.week {
			font-size: 28rpx;
			color: #1673ff;
		}
		.markIcon {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.weekTime {
		font-size: 28rpx;
		margin: 0 10rpx;
		color: #333;
	}
}

/deep/ .uni-table-th {
	padding: 0 !important;
	background-color: #fafafa !important;
}
/deep/ .uni-table-td {
	height: 140rpx;
	padding: 0 !important;
}
.mainBox {
	background-color: #fff;
	padding: 0 22rpx 22rpx;
}
.popBox {
	position: relative;
	margin-top: 60rpx;
	.popTitleBox {
		// width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		padding: 0 0 20rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		z-index: 20;
		background-color: #fff;
	}
	.popContentBox {
		padding: 60rpx 20rpx 20rpx;
		overflow: hidden;
		.commonStyle {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
		}
		.order {
			background-color: #f3f8ff;
			.btn {
				background-color: #1673ff;
				border-radius: 16rpx;
				width: 264rpx;
				height: 76rpx;
				line-height: 76rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
			}
			.btn1 {
				background-color: #fff;
				color: #1673ff;
				border: 1rpx solid #1673ff;
			}
		}
		.seconded {
			background-color: #f3f8ff;
		}
		.secondment {
			background-color: #f3f8ff;
		}
		.carOff {
			background-color: #f3f8ff;
		}
	}
}

.textInfo {
	padding: 12rpx 0;
	color: #666;
	font-size: 28rpx;
	.text-name {
		color: #666;
	}
	.text-value {
		color: #333;
	}
}
</style>
